<template>
  <nuxt-layout name="navigation">
    <Search/>
    <div class="container search">
      <Card>
        <template #title>
          共找到<span class="search-number">{{ total }}</span>条结果
        </template>
        <Site :site-name="key"
              ref="SiteRef"
              is-page
              :size="20"
              @getListAfter="getListAfter"
              :description="'未找到 ' + key + ' 相关结果'"
        >
          <template #empty>
            <nuxt-link to="/push">
              <el-button type="primary">提交网站</el-button>
            </nuxt-link>
          </template>
        </Site>
      </Card>
    </div>
  </nuxt-layout>
</template>

<script setup lang="ts">
const {setting} = useStoreToRefs(useStores.setting());
const route = useRoute();
const key = ref(route.params.key);
const total = ref(0);
const SiteRef = ref();
useHead({
  title: "搜索结果" + setting.value?.seoSeparate + key.value + setting.value?.seoSeparate + "共找到 " + total.value + " 条" + setting.value?.seoSeparate + setting.value?.name,
  meta: [
    {name: 'description', content: setting.value?.seoDescription},
    {name: 'keywords', content: setting.value?.seoKeywords.join(",") + "," + key.value}
  ]
});
const getListAfter = (number: number) => {
  total.value = number;
  SiteRef.value.data.forEach((item: any) => {
    item.siteName = highlight(item.siteName || "");
  });
};
const highlight = (text: string) => {
  let keyStr = route.params.key;
  if (keyStr) {
    let reg = new RegExp(keyStr.toString(), "gi");
    return text.replace(reg, "<b class='f-red-color'>" + keyStr + "</b>");
  } else {
    return text;
  }
};
</script>

<style scoped lang="scss">
.search {
  margin-top: 10px;

  .search-number {
    color: red;
    margin: 0 5px
  }
}
</style>